import { BoundText } from '@angular/compiler/src/render3/r3_ast';
import { Component, OnInit } from '@angular/core';
import {  FormControl ,FormControlName,FormGroup,FormBuilder, Validators} from '@angular/forms';
// import {Pipe,PipeTransform} from '@angular/core'
@Component({
  selector: 'app-hallo',
  templateUrl: './hallo.component.html',
  styleUrls: ['./hallo.component.scss']
})
export class HalloComponent implements OnInit {
  box:string ='box';
  title:string='';
  age:FormControl=new FormControl('');
  loginForm=new FormGroup({
    userName: new FormControl(''),
    passWord: new FormControl(''),

  });
  fromData={
    username:'',
    password:'',
  };
  datStr:Date=new Date()
  colors:Array<string>=['red','blue','green','yellow']
  constructor(
    private B:FormBuilder
  ) { }

  ngOnInit(): void {
  }
  handle(e:Event){
    console.log(e);
    
  }
  inputChange(e:any){
    console.log(e.target.value);
    
  }
  ageChangeFun(nowAge:number){ 
    nowAge++;
    this.age.setValue(nowAge)
  }
  subFormFun(){
    console.log(this.loginForm.value);
    
  }
  subBtnFun(obj:any){
    console.log(obj); 
  }
  valiDataForm:FormGroup=this.B.group({
    userName:['',[Validators.required,Validators.maxLength(18),Validators.minLength(6)]],
    password:['',[this.passwordVal]],
    phone:['',[Validators.required,this.phoneVal]]
  })
  passwordVal(password:FormControl) :object{
    let value=password.value||'';
    if(!value){
      return{msg:'请输入密码'}
    }else{
      const valid=value.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/);
      return valid?{}:{msg:'密码格式不正确'}
    }
  }
  phoneVal(phone:FormControl):object{
    const value=phone.value||'';
    if(!value)return {msg:'请输入手机号'}
    const valid=value.match(/[0-9]{11}/);
    return valid?{}:{msg:'手机号必须为11为数字'}
  }
  subvaliDataFormFun(){
    console.log(this.valiDataForm.get('userName'));
    
  }
}
